import React  from 'react';

import './index.less';


import {createPage} from 'nc-lightapp-front';
import {render} from '../../../../hrpub/common/frame';

import MainAction from '../actions/main';
import ButtonAction from '../actions/button';
import TableAction from '../actions/table';
import PaginationAction from '../actions/pagination';

import EntryAnalysisPage from '../components/EntryAnalysis';
import LeaveAnalysisPage from '../components/LeaveAnalysis';
import RegularAnalysisPage from '../components/RegularAnalysis';
import BackButton from '../../../../hrpub/common/components/hr-back';
import Layout from '../../../../hrpub/common/components/Layout';
import SearchModal from '../components/Search';
import Pagination from '../../../../hrpub/common/components/Pagination';
import ExportModal from '../components/ExportModal';

import {getColor, getAppPageConfig, handleHash} from '../../../../hrpub/common/utils/utils';

const {color, bgColor} = getColor();

const {Header} = Layout;

const Wrapper = render({
    actions: {
        mainAct: MainAction,
        btnAct: ButtonAction,
        tableAct: TableAction,
        pageAct: PaginationAction
    }
})(({props, state, action}) => {
    const {sca, button, search} = props;

    return (
        <div 
            className="staff-change-analysis"
            style={{
                backgroundColor: bgColor
            }}
        >
            <If condition={sca.page !== 'main'}>
                <Header
                    showButtons={sca.orgValue[sca.page]}
                    showOrgRefer={true}
                    buttonOptions={{
                        area: 'head',
                        onButtonClick: action.btnAct.headerClick
                    }}
                    button={button}
                    orgReferOptions={{
                        getOrgData: action.btnAct.changeOrg,
                        orgVal: sca.orgValue[sca.page]
                    }}
                    className="staff-change-header"
                >
                
                    <BackButton
                        onClick={action.btnAct.goBackToMain}
                        style={{
                            position: 'absolute',
                            left: '24px',
                            top: '29px'
                        }}
                    />
                </Header>
            </If>
            <Choose>
                <When condition={sca.page === 'main'}>
                    <div className="analysis-main-cards-wrap">
                        {Object.keys(sca.staffAreaMap).map((key) => {
                            let item = sca.staffAreaMap[key];
                            
                            return (
                                <div 
                                    className="staff-area"
                                    onClick={action.btnAct.analysisAreaHandle(key)}
                                    style={{
                                        color: color
                                    }}
                                >
                                    {item.title}
                                    <i className={`staff-area-icon-wrap ${item.iconClass}`}/>
                                </div>
                            );
                        })}
                    </div>
                </When>
                <When condition={sca.page === 'entry'}>
                    <EntryAnalysisPage
                        {...props}
                    />
                </When>
                <When condition={sca.page === 'leave'}>
                    <LeaveAnalysisPage
                        {...props}
                    />
                </When>
                <When condition={sca.page === 'regular'}>
                    <RegularAnalysisPage
                        {...props}
                    />
                </When>
            </Choose>
            <If condition={sca.page !== 'main'}>
                <div style={{
                    marginTop: '20px',
                    paddingRight: '20px'
                }}>
                    <Pagination
                        current={sca.pageInfo.pageIndex}
                        pageSize={sca.pageInfo.pageSize}
                        total={sca.pageInfo.total}
                        showSizeChanger={true}
                        showQuickJumper={true}
                        onChange={action.pageAct.turnPage}
                        onShowSizeChange={action.pageAct.changePageSize}
                    />
                </div>
            </If>
            <SearchModal
                {...props}
            />
            <ExportModal
                {...props}
            />
        </div>
    );

}); 


export default createPage({})(handleHash('2019', 'c=600920B0&p=600920B0p')(Wrapper));